<%--
  Created by IntelliJ IDEA.
  User: 29688
  Date: 2021/4/1
  Time: 12:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/layui/css/layui.css"
          media="all">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.5.7/style/admin.css"
          media="all">
    <script src="${pageContext.request.contextPath}/layui-v2.5.7/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设置我的资料</div>
                <div class="layui-card-body" pad15>
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">我的角色</label>
                            <div class="layui-form-mid layui-word-aux">
                                <c:if test="${sessionScope.user.rid==1}">管理员</c:if>
                                <c:if test="${sessionScope.user.rid==2}">普通用户</c:if>
                            </div>
                        </div>
                        <input type="hidden" name="uid" value="${sessionScope.user.uid}">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-form-mid layui-word-aux">
                                ${sessionScope.user.uname}
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">专业</label>
                            <div class="layui-input-inline">
                                <select id="major" lay-verify="" lay-search name="mid">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年级</label>
                            <div class="layui-input-inline">
                                <select id="grade" lay-verify="" name="grade">
                                    <option value="">请选择您的年级</option>
                                    <option value="1">大一</option>
                                    <option value="2">大二</option>
                                    <option value="3">大三</option>
                                    <option value="4">大三</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单选框</label>
                            <div class="layui-input-block" id="sex" name="sex">
                                <input type="radio" name="sex" value="男" title="男">
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <input name="url" id="userInoUrl" placeholder="图片地址"
                                       value="${sessionScope.userInfo.url}" class="layui-input">
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn" id="uploadUserInfo">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input type="text" name="iphone" value="${sessionScope.userInfo.iphone}"
                                       lay-verify="phone" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        i
                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mail" value="${sessionScope.user.mail}" lay-verify="email"
                                       autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="button" value="保存信息" class="layui-btn" lay-submit lay-filter="update">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var mid = '${sessionScope.userInfo.mid}'
    layui.use(['form', 'upload', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;
        var uploadInst = upload.render({
            elem: '#uploadUserInfo' //绑定元素
            , url: '/userInfo/upload' //上传接口
            , done: function (res) {
                if(res===1){
                    layer.msg("文件上传成功！");
                    var _body = window.parent;
                    var _iframe1=_body.document.getElementById('mainBody');
                    _iframe1.contentWindow.location.reload(true);
                }
            }
            , error: function () {
                //请求异常回调
            }
        });

        /*渲染用户信息*/
        function go() {
            $.ajax({
                url: "/user/majorList",
                type: "get",
                success: function (data) {
                    var html = ' <option value="">请选择你的专业</option>'
                    for (let i = 0; i < data.length; i++) {
                        if ( ''+data[i].mid ===mid) {
                            html += '<option value="' + data[i].mid + '" selected>' + data[i].mname + '</option>'
                        } else {
                            html += '<option value="' + data[i].mid + '">' + data[i].mname + '</option>'

                        }
                    }
                    console.log(html)
                    $("#major").html(html)
                    form.render();
                }
            })
            $("#sex>input[value='${sessionScope.userInfo.sex}']").attr("checked", true)
            $("#grade>option[value='${sessionScope.userInfo.grade}']").attr("selected", true)
            form.render();
        }
        /*渲染用户信息*/
        go();
        form.on('submit(update)', function (data) {
            console.log(data)
            $.ajax({
                url: "/user/updateInfo",
                type: "post",
                data: data.field,
                success: function (data) {
                    if (data === 0) {
                        layer.msg("未知错误！")
                    } else {
                        layer.msg("保存成功！")
                    }
                }
            })
        })
    });

</script>

</body>

</html>

